<head>
  <meta charset=UTF-8>
</head>
<body>
<ul>
  <li id="java">疯狂Java讲义</li>
  <li id="javaee" class="test">轻量级Java EE企业应用实战</li>
  <li id="ajax">疯狂前端开发讲义</li>
  <li id="xml">疯狂XML讲义</li>
  <li id="ejb">经典Java EE企业应用实战</li>
  <li><span id="android">疯狂Android讲义</span></li>
</ul>
<script type="text/javascript" src="jquery-3.1.1.js">
</script>
<script type="text/javascript">
  //访问ul元素下第一个li子元素
  $("ul>li:first").append("<b>是ul元素之内第一个li子元素</b>");
  //访问ul元素之内，没有id属性的li子元素
  $("ul>li:not([id])").append("<b>是ul元素之内、没有id属性li子元素</b>")
  //访问ul元素之内，索引为偶数的li子元素，并为它们添加背景色
  $("ul>li:even").css("background-color", "#ccffcc");
  //访问ul元素之内，索引大于4的li子元素(元素索引从0开始)
  $("ul>li:gt(4)").append("<br/><b>是ul元素之内、索引大于4的li子元素</b>")
    .css("border" , "1px dashed black");
  //访问ul元素之内，且包含span元素的li子元素
  $("ul>li:has('span')").append(
    "<br/><b>是ul元素之内、且包含span元素的li子元素</b>");
  //访问li元素之内，且可见的span子元素
  $("li>span:visible").append(
    "<b>是li元素之内，且可见的span子元素</b>")
    .css("background-color" , "#bbbbbb");
</script>
</body>
